<template>
  <view
    class="custom-header"
    :style="{ paddingTop: statusBarInfo.top + 'px', height: height + 'rpx' }"
  >
    <image class="bgc" mode="aspectFill" :src="bgImg"></image>
    <!-- 返回按钮 -->
    <view
      class="statusBar-line"
      :style="{ height: statusBarInfo.height + 'px' }"
    >
      <image
        mode="aspectFit"
        class="statusBar-line-left"
        src="/static/icon/logo.png"
        alt=""
      />
    </view>

    <!-- 右侧插槽 -->
    <view class="content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    bgImg: {
      type: String,
      default: "/static/bgc/bg.png",
    },
    height: {
      type: String || Number,
      default: 400,
    },
  },
  data() {
    return {
      statusBarHeight: 0,
      statusBarInfo: {},
    };
  },
  created() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    console.log({
      systemInfo,
    });
    console.log(
      "uni.getMenuButtonBoundingClientRect()",
      uni.getMenuButtonBoundingClientRect()
    );
    this.statusBarInfo = uni.getMenuButtonBoundingClientRect();
    this.statusBarHeight = systemInfo.statusBarHeight;
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.custom-header {
  position: relative;
  /* height: fit-content; */
  height: 400rpx;
  /* display: flex; */
  /* align-items: center;
  justify-content: center; */
  /* background-color: #ffffff; */
  /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); */
  color: azure;
}
.statusBar-line {
  display: flex;
  align-items: center;
  width: 100%;
}
.statusBar-line-left {
  /* height: 100%; */
  margin-right: 20rpx;
}

.bgc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120%;
  z-index: -1;
  border-radius: 0 0 30px 30px;
}
.content {
  width: 100%;
  height: 100%;
}
</style>
